<!--
 * @Author: zhangfan
 * @Date: 2024-06-25 18:36:08
 * @LastEditors: ***
 * @LastEditTime: 2024-06-25 19:05:26
 * @Description: 11
 * @FilePath: /demo/src/views/options/index.vue
-->
<template>
  <div class="parent">
    <h3>父组件</h3>
    <div>{{ text | filterText }}</div>
  </div>
</template>
<script>
export default {
  name: 'options_test',
  age: 18,
  testOptionsMethod () {
    console.log('hello options')
  },
  data () {
    return {
      text: '',
      searchForm: {
        input: ''
      }
    }
  },
  filters: {
    filterText: (val) => {
      switch (val) {
        case 'green':
          return '绿色'
        case 'red':
          return '红色'
        case 'yellow':
          return '黄色'
        default:
          break
      }
      return val
    }
  },
  created () {
    // 功能点1: 获取、调用data外定义的属性
    console.log(this.$options.name) // options_test
    console.log(this.$options.age) // 18
    this.$options.testOptionsMethod() // hello options
    // 功能点2: 使用this.$options复用过滤器filters中的方法
    this.getTextFn()
    // 功能点3: 一键搞定之重置data中的数据
    this.retset()
  },
  methods: {
    getTextFn () {
      const filterText = this.$options.filters.filterText
      this.text = filterText('green')
    },
    retset () {
      // 重置某一个表单数据
      this.searchForm = this.$options.data().searchForm
      // 也可以重置整个$data
      this.data = this.$options.data()
    }
  }
}
</script>
<style scoped>
.parent {
  border: 1px solid #ccc;
  padding: 50px;
}
.view-contain-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
.operate {
  cursor: pointer;
}
</style>
